<template>
 <div class="main">
    <br/>
    <!-- 显示商品数据 -->
    <div class="top">
        <!-- 商品图片 -->
        <div class="img">
            <!-- 商品图片内容 -->
            <el-image :src="productlist.url"></el-image>
        </div>
        <!-- 商品信息 包括购买和购物车-->
        <div class="dress">
            <p>{{ productlist.name }}</p>
            <p class="price">价格:<span>{{ productlist.price }}</span></p>
            数量：<el-input-number
                v-model="order.quantity"
                @change="handleChange"
                :min="1" :max="this.productlist.number">
            </el-input-number>
            <br/>
            <br/>
            <el-button type="danger" plain @click="buyNow">立即购买</el-button>
            <el-button type="danger" @click="addCart">加入购物车</el-button>
        </div>
    </div>
    <!-- 显示商品详情 -->
    <div class="tommer">
        <!-- 商品详情内容 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="详情" name="1">
                <div v-html="productlist.description"></div>
            </el-tab-pane>
            <el-tab-pane label="用户评论" name="2">用户评论</el-tab-pane>
        </el-tabs>
    </div>
 </div>
</template>

<script>
export default {
    data() {
        return {
            // 商品数据
            productlist: [],
            activeName: '1',
            order: {
                userId: null,
                // 商品ID
                productId: null,
                quantity: null,
                price: null,
                status: '待支付'
            }
        }
    },
    created() {
        this.order.productId = this.$route.params.id
        this.getProduct()
    },
    methods: {
        async getProduct() {
            const { data: res } = await this.$axios.get('/product/selectById/' + this.order.productId)
            if (res.code !== 200) {
                return this.$message.error('商品不存在！')
            }
            this.productlist = res.data.product[0]
            console.log(res)
            console.log(this.productlist)
        },
        // 加入购物车
        async addCart() {
            this.order.userId = window.localStorage.getItem('userID')
            if (this.order.userId === null) {
                this.$router.push('/login')
            } else {
                this.order.price = this.productlist.price * this.order.quantity
                console.log(this.order)
                const { data: res } = await this.$axios.post('/shopping-cart/add', this.order)
                console.log(res)
                if (res.code !== 200) {
                    return this.$message.error('加入购物车失败')
                }
                this.$message.success('加入购物车成功')
            }
        },
        buyNow() {
            if (window.localStorage.getItem('userID') === null) {
                this.$router.push('/login')
            } else {
                console.log('立即购买 productId status userId')
                const product = [{
                    id: null,
                    merchantId: null,
                    productUrl: '',
                    productName: '',
                    price: 0,
                    quantity: 1,
                    subtotal: 0
                }]
                product[0].productId = this.order.productId
                product[0].merchantId = this.productlist.merchantId
                product[0].productName = this.productlist.name
                product[0].productUrl = this.productlist.url
                product[0].price = this.productlist.price
                product[0].quantity = this.order.quantity
                console.log(product)
                this.$router.push({ path: '/buy', query: { selectedItems: product } })
            }
        },
        handleChange(newNumber) {
            console.log(newNumber)
            this.productlist.quantity = newNumber
        }
    }
}
</script>

<style lang="less" scoped>

.main {
    width: 1200px;
    margin: 0px auto;
}
.top {
    display: flex; /* 使用flex布局使图片和描述并列 */
    align-items: flex-start;
    margin-bottom: 20px; /* 商品详情距离顶部内容的间隙 */
  }

  .img {
    flex-basis: 30%; /* 图片占据一半宽度 */
    padding: 10px;
    background-color: #f3f3f3; /* 临时背景颜色用于显示 */
    text-align: center;
    /* 假设商品图片为正方形，我们可以用padding-top来模拟高度 */
    padding-top: 5%; /* 高度与宽度相等 */
   /* background-image: url('path-to-your-image.jpg'); /* 商品图片路径 */
    background-size: cover;
    background-position: center;
  }

  .dress {
    flex-basis: 50%; /* 描述占据一半宽度 */
    padding: 10px;
    /* 示例文字 */
    font-family: Arial, sans-serif;
    font-size: 20px;
  }
  .price {
    background-color: #cfb584;
    width: 300px;
    > span {
        font-size: 30px;
        color: red;
    }
  }
  .tommer {
    padding: 10px;
    background-color: #f9f9f9; /* 不同背景颜色以区分内容 */
    /* 示例文字 */
    font-family: Arial, sans-serif;
    width: 100%;
    height: 300px;
    background-color: rgb(178, 234, 234);
  }

  .el-button {
    margin-top: 10px;
  }
  .el-image {
    width: 300px;
    height: 300px;
  }
</style>
